import React from 'react'
import { Divider, Space } from 'antd';
import { TextWidget } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';
import { useSearchUIDispatch } from '../../../../../store/hooks/useSearchUIDispatch';
import { useSearchUIState } from '../../../../../store/hooks/useSearchUIState';
import './index.less'

interface PropObj {
  visible: boolean,
}
export default function PanelContainer(props) {
  const { showGraph, panelId } = useSearchUIState();
  const updateUIState = useSearchUIDispatch();
  const iconStyle = { fontSize: 16, marginRight: 5 }
  return (
    <div className='panelContainer'>
      {props.children}
      {(panelId !== 'advancedSearch') && <div className='searchPanelOperation'>
        <div className='operationLeft'>
          <Space split={<Divider type="vertical" style={{ background: '#ddd' }} />}>
            {!showGraph && <span className='operationFlag'><InbizIcon type='icon-sousuoxiala-yidongguangbiao' style={iconStyle} /><TextWidget>SearchEngine.moveCursor</TextWidget></span>}
            {!showGraph && <span className='operationFlag'><InbizIcon type='icon-sousuoxiala-xuanzetiaomu' style={iconStyle} /><TextWidget>SearchEngine.selectEntry</TextWidget></span>}
            <span className='operationFlag'><InbizIcon type='icon-sousuoxiala-yincangchuangkou' style={iconStyle} /><TextWidget>SearchEngine.hideModal</TextWidget></span>
          </Space>
        </div>
        {showGraph && <div className='operationLeft'>
          <span className='operationFlag' style={{ cursor: 'pointer' }} onClick={() => updateUIState({ fullScreen: true, showFullModal: true })}><TextWidget>SearchEngine.fullScreen</TextWidget></span>
        </div>}
      </div>}
    </div>

  )
}
